<template>
  <div>
    <my-table :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <input
            class="tag-input form-control"
            style="width: 100px"
            type="text"
            v-if="scope.row.inputVisible"
            @blur="scope.row.inputVisible = false"
            v-focus
            @keyup.enter="enterFn(scope.row)"
            v-model="scope.row.inputValue"
            @keyup.esc="scope.row.inputValue = ''"
          />
          <button
            style="display: block"
            class="btn btn-primary btn-sm add-tag"
            v-else
            @click="scope.row.inputVisible = true"
          >
            +Tag
          </button>
          <span
            v-for="(str, idx) in scope.row.tags"
            :key="idx"
            class="badge bg-warning"
          >
            {{ str }}
          </span>
        </td>
        <td>
          <button
            class="btn btn-danger btn-sm"
            @click="removeBtn(scope.row.id)"
          >
            删除
          </button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from "../components/MyTable.vue";

export default {
  components: {
    MyTable,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 2,
          goods_name: "保暖雪地靴",
          goods_price: 89,
          tags: ["保暖", "防滑"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 3,
          goods_name: "冬季新款毛衣",
          goods_price: 298,
          tags: ["秋冬", "毛衣"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 4,
          goods_name: "大码女装衬衫",
          goods_price: 298,
          tags: ["雪纺衫", "打底"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 5,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 6,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 7,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 8,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
        {
          id: 9,
          goods_name: "帆布鞋",
          goods_price: 298,
          tags: ["舒适", "透气"],
          inputVisible: false,
          inputValue: "",
        },
      ],
    };
  },
  // created() {
  //   this.$axios({
  //     url: "/api/goods",
  //   }).then((res) => {
  //     console.log(res);
  //     this.list = res.data.data;
  //   });
  // },
  methods: {
    removeBtn(id) {
      let index = this.list.findIndex((obj) => obj.id === id);
      this.list.splice(index, 1);
    },
    enterFn(obj) {
      if (!obj.inputValue.trim()) return alert("请输入内容");
      obj.tags.push(obj.inputValue);
      obj.inputValue = "";
    },
  },
};
</script>

<style>
</style>